<template>
	<view>
		<!-- #ifdef MP -->
		<view class="custom" :style="{'background':navbg}">

			<uni-nav-bar :status-bar="true" :fixed="true" color="#333" left-icon="arrowleft" background-color="rgba(255,255,255,0)"
			 @click-left="back">
				<view class="input-view" @click="navTo('storeSearch')">
					<uni-icon type="search" size="22" color="#8E8E93" />
					<input confirm-type="search" class="input" type="text" placeholder-class="input-placeholder" placeholder="输入搜索关键词">
				</view>
			</uni-nav-bar>
		</view>
		<!-- #endif -->
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<swiper class="carousel" circular indicator-dots autoplay indicator-color="rgba(255,255,255,.4)"
			 indicator-active-color="rgba(255,255,255,1)" @change="swiperChange">
				<swiper-item v-for="(item, index) in infoData.banner" :key="index" class="carousel-item" @click="preImg(item,index)">
					<image :src="item.image" />
				</swiper-item>
			</swiper>
		</view>
		<view class="box-content">
			<view class="store-info">
				<view class="info-left">
					<image :src="infoData.shop_logo"></image>
				</view>
				<view class="info-right">
					<view class="info1">
						<text class="font34 colorfont" @click="navTo('storeDetailShop')">{{infoData.shop_name}}</text>
						<image src="/static/home/store/right.png" mode="widthFix"></image>
						<view class="concern2" v-if="infoData.is_follow==0" @click="guanZhu(0)">
							关注店铺
						</view>
						<view class="concern" v-else @click="guanZhu(1)">
							已关注
						</view>
					</view>
					<view class="info2">
						<image src="/static/home/store/star.png" mode="widthFix" v-for="item in rate" :key="item"></image>
						<image src="/static/home/store/star_off.png" mode="widthFix" v-for="item in rateOff" :key="item"></image>
						<text class="font20 color999" style="margin-right: 20upx;">{{infoData.follow||0}} 人关注</text>
						<text class="font20" style="color: #FF5E00;" @click="openLocation">距我{{distanceStr}}km</text>
						<view class="yticon icon-you" style="font-size: 12px;position: relative;top: 3rpx;color: #FF5E00;"></view>
					</view>
				</view>
			</view>
			<view class="uni-padding-wrap" :style="{'top':statusBarHeight}">
				<view class="uni-form-item font28 colorfont">
					<view class="child" :class="{active:typeClass==''}" @click="clickItem('')">
						全部
					</view>
					<view class="child" :class="{active:(typeClass=='price asc'||typeClass=='price desc')}" @click="clickItem('price asc')">
						价格
						<text class="square" :class="{activeSq:squareClass=='price asc'}"></text>
						<text class="square2" :class="{activeSq2:squareClass=='price desc'}"></text>
					</view>
					<view class="child" :class="{active:typeClass=='package_sale desc'}" @click="clickItem('package_sale desc')">
						销量
					</view>
					<view class="child" :class="{active:typeClass=='create_at desc'}" @click="clickItem('create_at desc')">
						新品
					</view>
					<view class="icon" @click="chooseStatus(type)">
						<image src="../../../static/home/store/one-clo.png" mode="widthFix" v-if="type=='column'"></image>
						<image src="../../../static/home/store/two-clo.png" mode="widthFix" v-else></image>
					</view>
				</view>
			</view>
			<view class="emity" v-if="infoList.length==0">
				暂无商品~~~
			</view>
			<view :class="[type == 'column' ? 'uni-list' : 'pageList__row--wrap']" v-else>
				<block v-for="(item, index) in infoList" :key="index">
					<list-good :type="type" :dataObj="item" :index="index" @click="clickListGood(item)" :style="{ 'width': type == 'column' ? '100%' : '48%' }">

					</list-good>
				</block>
			</view>
			<!-- <view class="loading" v-show="!searchLoading">正在载入更多...</view> -->
			<!-- <view class="loading complete" v-show="!searchLoadingComplete">已加载全部</view> -->
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import listGood from '@/components/wlp-list-good/wlp-list-good.vue';
	import {
		distance
	} from '@/common/util'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 44 + 'px'
	export default {
		components: {
			uniNavBar,
			uniIcon,
			listGood
		},
		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				infoData: {},
				authorize: {},
				distanceStr: 0,
				rate: [],
				rateOff: [],
				type: 'row',
				navbg: 'rgba(255,255,255,0)',
				statusBarHeight: statusBarHeight,
				typeClass: '', //筛选文字选中
				squareClass: 0, //三角形选中
				infoList: [], //放置返回数据的数组  
				isFromSearch: true, // 用于判断infoList数组是不是空数组，默认true，空的数组  
				pageNo: 1, // 设置加载的第几次，默认是第一次  
				pageNos:0,
				pageSize: 10, //返回数据的个数  
				searchLoading: false, //"上拉加载"的变量，默认false，隐藏  
				searchLoadingComplete: false //“没有数据”的变量，默认false，隐藏  

			};
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			this.pageNo = 1
			this.loadList(this, this.typeClass);
			// this.loadData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//事件监听滚动条
		onPageScroll: function(Object) {
			var scrollTop = (Object.scrollTop) / 100
			// console.log(scrollTop)
			this.navbg = "rgba(255,255,255," + scrollTop + ")"
		},
		onLoad() {
			let that = this;
			uni.getStorage({
				key: 'authorize',
				success: function(res) {
					that.authorize = res.data;

				}
			});

			that.loadList(that, that.typeClass);
		},
		onShow() {
			this.loadData();
		},
		onReachBottom: function() { //触底开始下一页
			let that = this;
			if (that.pageNo >= that.pageNos) {
				return;
			}
			//加载我的订单
			that.pageNo= that.pageNo + 1;
			that.loadList(that, that.typeClass);
		},

		methods: {
			/**
			 * 请求商铺信息
			 */
			async loadData() {
				let that = this;
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: this.$requestApi.storeInfo,
						data: {
							cid: 19
						}
					})
					.then(result => {
						let _data = result.data;
						console.log(_data.result)
						if (_data.code === 200) {
							that.infoData = _data.result;
							that.distanceStr = distance(that.authorize.latitude, that.authorize.longitude, _data.result.lat, _data.result.lng);
							that.rate = that.getStar(_data.result.shop_level_star);
							that.rateOff = that.getStar(6 - _data.result.shop_level_star)
						}
					})

			},
			// 点击筛选
			clickItem(type) {
				if (type == 'price asc') {
					if (this.squareClass == 0 || this.squareClass == 'price desc') {
						this.squareClass = 'price asc'
						type = 'price asc'
					} else {
						this.squareClass = 'price desc'
						type = 'price desc'
					}

				} else {
					this.squareClass = 0
				}
				this.pageNo = 1
				this.searchLoading= false, //"上拉加载"的变量，默认false，隐藏
				this.searchLoadingComplete= false //“没有数据”的变量，默认false，隐藏  
				this.typeClass = type;
				this.loadList(this, type);
			},
			// 查看地址
			openLocation() {
				uni.openLocation({
					latitude: parseFloat(this.infoData.lat),
					longitude: parseFloat(this.infoData.lng),
					success: function() {
						console.log('success');
					},
				});
			},
			// 加载列表
			loadList(that, type) {
				let pageNo = that.pageNo, //把第几次加载次数作为参数  
					pageSize = that.pageSize; //返回数据的个数  
				uni.showLoading({
					title:'加载中'
				})
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: this.$requestApi.goodsList,
						data: {
							cid: 19,
							page: pageNo,
							page_size: pageSize,
							order: type
						}
					})
					.then(result => {
						uni.hideLoading()
						let _data = result.data;
						console.log(_data.result)
						if (_data.code === 200) {
							//判断是否有数据，有则取数据  
							if (that.pageNo <= 1) {
								if (_data.result.list.length == 0) {
								} else {
									that.infoList= _data.result.list;
								}
								that.pageNos= (_data.result.total+(pageSize-1))/pageSize;
							} else {
								that.infoList=that.infoList.concat(_data.result.list);
							}
							that.pageNo = pageNo;
						} else if (_data.code === 2007) {
							that.infoList = []
						}
					})
			},
			// 点击单个商品
			clickListGood(item) {
				this.$Router.push({
					name: 'product',
					params: {
						id: item.goods_id
					}
				})
			},
			// 关注店铺
			guanZhu(type) {
				let that = this;
				let url = '';
				let cid = 0;
				if(type==0){
					that.infoData.is_follow=1;
					url = that.$requestApi.attention;
					cid = that.infoData.cid;
				}else{
					that.infoData.is_follow=0;
					url = that.$requestApi.cancleAttention;
					cid = [that.infoData.cid];
				}
				
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: url,
						data: {
							cid:cid
						}
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							console.log('success')
						}
					})
			},
			// 预览图片
			preImg(item, items) {
				if (item.linktype == 1) {
					this.$Router.push({
						name: 'product',
						params: {
							id: item.linkvalue
						}
					})
				}
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			back() {
				this.$Router.back(1)
			},
			navTo(url) {
				this.$Router.push({
					name: url,
					params: {
						cid: this.infoData.cid
					}
				});
			},
			chooseStatus(e) {
				if (e === 'row') {
					this.type = 'column'
				} else {
					this.type = 'row'
				}
			},
			getStar(num) {
				var arr = []
				for (var i = 0; i < num; i++) {
					if (num == 0) {
						return;
					} else {
						arr.push(i + 1)
					}
				}
				return arr;
			}
		},
		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			this.$api.msg('点击了搜索框');
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.$api.msg('点击了扫描');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},

		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
		// #endif
	}
</script>

<style lang="scss">
	@import '@/style/mixin/triangle.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background: #fefefe;
	}

	.emity {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		width: 100%;
		margin-top: 200upx;
	}

	/* #ifdef MP */
	.custom {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.input-placeholder {
		color: #8e8e93;
		font-size: 28upx;
	}

	.carousel-section {
		padding: 0;

		.titleNview-placing {
			padding-top: 0;
			height: 0;
		}

		.carousel {
			width: 100%;
			height: 350upx;

			.carousel-item {
				padding: 0;
			}
		}

		.swiper-dots {
			left: 45upx;
			bottom: 40upx;
		}
	}

	.input-view {
		width: 70%;
		display: flex;
		background-color: #e7e7e7;
		height: 60upx;
		border-radius: 30upx;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 14upx 0;
		line-height: 60upx;
		background: #f5f5f5;
	}

	.input-view .uni-icon {
		line-height: 30px !important;
	}

	.input-view .input {
		height: 30px;
		line-height: 30px;
		width: 90%;
		padding: 0 3%;
	}

	/* #endif */
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 350upx;
			transition: .4s;
		}
	}

	.carousel {
		width: 100%;
		height: 350upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	.pageList__row--wrap {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		justify-content: space-between;
	}

	.uni-padding-wrap {
		background-color: #fff;
		box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04);
		margin: 30upx auto 50upx auto;
		border-radius: 0 0 10upx 10upx;
		position: sticky;
		background-color: #fff;
		z-index: 9;
		width: 100%;
	}

	.uni-padding-wrap::before {
		content: '';
		position: absolute;
		top: 0;
		background: rgba(0, 0, 0, 0.05);
		left: 30upx;
		right: 0;
		height: 1upx;
	}

	.uni-form-item {
		justify-content: space-between;
		align-items: center;
		padding: 20upx 0;

		.child {
			position: relative;

			.square {
				position: absolute;
				top: -2upx;
				margin-left: 4upx;
				@include triangle(10upx, top, #D1D1D6);
			}

			.square2 {
				position: absolute;
				margin-left: 4upx;
				top: 24upx;
				@include triangle(10upx, bottom, #D1D1D6);
			}

			.activeSq {
				@include triangle(10upx, top, #222);
			}

			.activeSq2 {
				@include triangle(10upx, bottom, #222);
			}
		}

		.active {
			color: #FF5E00;
		}
	}

	.uni-form-item .icon {
		position: relative;
		top: 6upx;
	}

	.uni-form-item .icon image {
		width: 40upx;
		height: auto;
	}

	.uni-list:before {
		height: 0;
	}

	.box-content {
		position: relative;
		top: -10upx;
	}

	.store-info {
		position: relative;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 30upx 30upx 0;
		border-radius: 10upx 10upx 0 0;

	}

	.store-info .info-left {
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
	}

	.store-info .info-left image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}

	.store-info .info-right {
		width: 560upx;
		height: 100upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.store-info .info-right .info1 {
		display: flex;
		align-items: center;
		position: relative;
	}

	.store-info .info-right .info1 image {
		width: 16upx;
		height: auto;
		margin-left: 20upx;
		margin-top: 4upx;
	}

	.info-right .concern {
		display: inline-block;
		border-radius: 50upx;
		width: 130upx;
		height: 46rpx;
		text-align: center;
		line-height: 46rpx;
		border: 1px solid rgba(11, 14, 17, 1);
		color: #0B0E11;
		font-size: 24upx;
		position: absolute;
		right: 0;
	}

	.info-right .concern2 {
		display: inline-block;
		border-radius: 50upx;
		width: 130upx;
		height: 46rpx;
		text-align: center;
		line-height: 46rpx;
		background: linear-gradient(90deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
		color: #fff;
		font-size: 24upx;
		position: absolute;
		right: 0;
	}

	.info2 {
		display: flex;
		align-items: center;
	}

	.info2 image {
		width: 20upx;
		height: auto;
		margin-right: 14upx;
	}
</style>
